<template>
	<view>
		<uni-popup ref="addressPop" type="bottom">
			<view class="address-box">
				<view class="title-box">
					<view class="cancle" @click="cancle">取消</view>
					<view class="title">{{title}}</view>
					<view class="confirm" @click="confirmData">确定</view>
				</view>
				<picker-view v-if="pickShow" :indicator-style="indicatorStyle" :value="checkValue" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in provinces" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in citys" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in areas" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in streets" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "../uni-popup/uni-popup.vue";
	import config from '@/common/config.js'
	const baseUrl = config.host
	import common from '@/common.js';
	export default {
		name:"con-address",
		components: {
			uniPopup
		},
		props:{
			// 标题
			title : {
				type: String,
				default: "请选择地址"
			}
		},
		data: function () {
			return {
				provinces: [],
				province: {},
				citys: [],
				city: {},
				areas: [],
				area: {},
				streets: [], 
				street: {}, 
				checkValue: [0,0,0,0],
				pickShow: false,
				indicatorStyle: `height: 50px;`
			}
		},
		methods:{
			// 打开弹窗
			open(load){
				this.$refs.addressPop.open("bottom");
				if(load){
					this.setAddress();
				}
			},
			// 关闭弹窗
			close(){
				this.$refs.addressPop.close();
			},
			// 取消事件
			cancle(){
				this.close();
			},
			// 确定
			confirmData(){
				// console.log(this.checkValue);
				this.province = this.provinces[this.checkValue[0]];
				this.city = this.citys[this.checkValue[1]];
				this.area = this.areas[this.checkValue[2]];
				this.street = this.streets[this.checkValue[3]];
				console.log("省",this.province);
				console.log("市",this.city);
				console.log("区",this.area);
				console.log("街道",this.street);
				this.$emit("confirm",this.province,this.city,this.area,this.street);
				this.close();
			},
			setAddress(){
				this.getProvinces();
				this.pickShow = true;
			},
			// 获取省列表以及下属联动
			async getProvinces(province,city,area,street){
				console.log(province,city,area,street);
				this.provinces = await this.queryAddress("");
				this.province = province || this.provinces[0];
				this.getCitys(this.province.id,city,area,street);
			},
			// 获取城市列表以及下属联动
			async getCitys(id,city,area,street){
				this.citys = await this.queryAddress(id);
				this.city = city ? this.citys[this.checkValue[1]] : this.citys[0];
				this.getAreas(this.city.id,area,street);
			},
			// 获取区县列表以及下属联动
			async getAreas(id,area,street){
				this.areas = await this.queryAddress(id);
				this.area = area ? this.areas[this.checkValue[2]] : this.areas[0];
				this.getStreets(this.area.id,street);
			},
			// 获取区县列表以及下属联动
			async getStreets(id,street){
				this.streets = await this.queryAddress(id);
				this.street = street ? this.streets[this.checkValue[3]] : this.streets[0];
			},
			bindChange: function (e) {
				this.checkValue = e.detail.value;
				this.province = this.provinces[this.checkValue[0]];
				console.log("bindchange",this.province,this.city,this.area,this.street);
				this.getProvinces(this.province,this.city,this.area,this.street);
			},
			// 获取地址，都走这个方法。
			queryAddress(parentId){
				return new Promise((resolve, reject) => {
					uni.request({
						header: {
							'Content-Type': 'application/x-www-form-urlencoded', 
						},
						url: config.host + 'area/areaList/' + parentId, 
						// url: 'https://api.zhaocaiami.vworld365.com/' + 'area/areaList/' + parentId, 
						method: 'POST',
						data: {
							parentId: parentId
						},
						success: (res) => {
							if (res.data.status == '200') {
								if (res.data.data.length > 0) {
									resolve(res.data.data);
								}
							} else {
								uni.showToast({
									title: '获取地址失败',
									icon: 'none',
									duration: 1000
								})
							}
						},
						fail: (error) => {
							uni.showToast({
								title: '获取地址失败',
								icon: 'none',
								duration: 1000
							})
						}
					});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.address-box{
		height: 600rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.title-box{
		height: 100rpx;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		display: flex;
		text-align: center;
		background-color: #FFFFFF;
		.cancle,.confirm{
			width: 140rpx;
			height: 100%;
			text-align: center;
			line-height: 100rpx;
		}
		.confirm{
			color: #fa3534;
		}
	}
	.picker-view{
		height: 500rpx;
		width: 100%;
		background-color: #FFFFFF;
		.item{
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
